<template>
    <div>
        <div @click="onTrigger">
            <!-- 触发弹窗 -->
            <slot name="trigger"></slot>
        </div>

        <el-dialog
            title="等级调整"
            :visible.sync="visible"
            width="50vw"
            :top="top"
            :modal-append-to-body="false"
            center
            :before-close="close"
            :close-on-click-modal="false"
        >
            <!-- 用户数据 -->
            <div v-loading="distributionList.length == 0" class="content">
                <el-form ref="distributionData" :model="form" label-width="220px" size="small">
                    <el-form-item label="用户信息：" prop="">
                        {{ distributionList.user.nickname }}（{{ distributionList.user.sn }})
                    </el-form-item>

                    <el-form-item label="当前分销等级" prop="">
                        {{ distributionList.user.level_name }} {{ form.level_id }}
                    </el-form-item>

                    <el-form-item label="调整后分销等级" prop="" required v-if="distributionListLevels.length">
                        <el-select v-model="form.level_id" placeholder="全部" :disabled="isHightWeights">
                            <el-option
                                v-for="item in distributionListLevels"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                                :disabled="item.disabled"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="联创">
                        <el-radio v-model="form.founders" label="1">是</el-radio>
                        <el-radio v-model="form.founders" label="0">否</el-radio>
                    </el-form-item> -->
                    <el-form-item label="合伙人">
                        <el-radio v-model="form.partner" label="1">是</el-radio>
                        <el-radio v-model="form.partner" label="0">否</el-radio>
                    </el-form-item>
                    <!-- <el-form-item label="省代理">
                        <area-selects
                            :props="{ multiple: false, checkStrictly: false }"
                            :area_id.sync="form.province"
                            :area-level="1"
                            style="float: left"
                        />
                        <el-button
                            style="float: left; margin-left: 10px"
                            @click="cancelIdentity('province')"
                            v-if="form.province.length > 0"
                            >取消</el-button
                        >
                    </el-form-item>
                    <el-form-item label="市代理">
                        <area-selects
                            :props="{ multiple: false, checkStrictly: false }"
                            :area_id.sync="form.city"
                            :area-level="2"
                            style="float: left"
                        />
                        <el-button
                            style="float: left; margin-left: 10px"
                            @click="cancelIdentity('city')"
                            v-if="form.city.length > 0"
                            >取消</el-button
                        >
                    </el-form-item>
                    <el-form-item label="区/县代理">
                        <area-selects
                            :props="{ multiple: false, checkStrictly: false }"
                            :area_id.sync="form.district"
                            style="float: left"
                        />
                        <el-button
                            style="float: left; margin-left: 10px"
                            @click="cancelIdentity('district')"
                            v-if="form.district.length > 0"
                            >取消</el-button
                        >
                    </el-form-item> -->
                    <!-- <span class="desc">请勿随意修改分销身份和等级，每次调整分销会员等级都会赠送福利</span> -->
                </el-form>
            </div>
            <!-- 底部弹窗页脚 -->
            <div slot="footer">
                <el-button size="small" @click="handleEvent('cancel')">取消</el-button>
                <el-button size="small" @click="handleEvent('confirm')" type="primary">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

import {
    apiCancelIdentity,
    apiDistributionAdjustLevel,
    apiDistributionAdjustLevelInfo
} from '@/api/distribution/distribution'
import AreaSelects from '@/components/area-selects.vue'

@Component({
    components: {
        AreaSelects
    }
})
export default class UserSelect extends Vue {
    @Prop({ default: '25vh' }) top!: string | number //弹窗的距离顶部位置
    @Prop({ default: 1 }) id!: string | number //弹窗的距离顶部位置

    /** S Data **/
    visible: any = false //是否显示

    distributionList: any = {
        user: {
            level_name: '默认等级(1级)',
            nickname: '',
            sn: ''
        }
    }
    distributionListLevels: any[] = []
    isHightWeights = false
    form: any = {
        level_id: '',
        district: [],
        province: [],
        city: [],
        //identity_ids: [],
        partner: '0',
        founders: '0'
    }

    /** E Data **/

    /** S Method **/

    // 分销等级
    getDistributionAdjustLevelInfo() {
        apiDistributionAdjustLevelInfo({ user_id: this.id }).then((res: any) => {
            this.distributionList = res
            const user = res.user || {}
            const userWeights = user.weights || 0
            this.distributionListLevels = res.levels.map((item: any) => {
                return {
                    ...item,
                    disabled: Number(userWeights) > Number(item.weights)
                }
            })

            this.isHightWeights = userWeights >= Math.max(...this.distributionListLevels.map(item => item.weights))
            //this.form = Object.assign(this.form, res.user)

            // res.user.identity_ids.map((item: any) => {
            //     if (!this.form.identity_ids.includes(item.identity_id)) {
            //         this.form.identity_ids.push(item.identity_id)
            //     }
            //     this.form[item.type] = item.area_code
            // })
            if (res.user.data.province) {
                this.form.province = res.user.data.province
            }
            if (res.user.data.city) {
                this.form.city = res.user.data.city
            }
            if (res.user.data.district) {
                this.form.district = res.user.data.district
            }
            if (res.user.data.partner) {
                this.form.partner = res.user.data.partner
            }
            if (res.user.data.founders) {
                this.form.founders = res.user.data.founders
            }
            this.form.level_id = res.user.data.level_id
        })
    }

    //取消身份
    cancelIdentity(type = '') {
        this.$confirm('你确认要取消当前身份吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
            .then(() => {
                apiCancelIdentity({
                    type: type,
                    user_id: this.id
                }).then(() => {
                    switch (type) {
                        case 'company':
                            this.form.company = []
                            break
                        case 'province':
                            this.form.province = []
                            break
                        case 'city':
                            this.form.city = []
                            break
                    }
                    this.$emit('update', '')
                    this.close()
                })
            })
            .catch(() => {})
    }

    // 点击取消
    handleEvent(type: 'cancel' | 'confirm') {
        if (type === 'cancel') {
            this.close()
        }
        if (type === 'confirm') {
            if (this.form.level_id == '') {
                return this.$message.error('请选择分销等级！')
            }
            this.form.user_id = this.id
            apiDistributionAdjustLevel({
                ...this.form
            }).then(() => {
                this.$emit('update', '')
            })
            this.close()
        }
    }

    // 打开弹窗
    onTrigger() {
        this.getDistributionAdjustLevelInfo()
        this.visible = true
    }

    // 关闭用户选择弹窗
    close() {
        this.visible = false
    }
    areaIdChangeHandler(row: any) {}

    /** E Method **/
}
</script>

<style lang="scss" scoped>
.content {
    margin: 50px 0;
}
</style>
